<template>
  <div class="companyList w100p h100p">
    <div class="flb bgWH headerTitle">
      <div class="total l20">
        <span>共</span>
        <span class="cYE mr2 ml2 f16">{{ companyList.length }}</span>
        <span>个公司</span>
      </div>
      <div class="cYE f14 l20" @click="showCompanyPopup({}, 'add')">+添加公司</div>
    </div>
    <div v-for="(item, idx) in companyList" :key="idx" class="itemBox1 flc w100p">
      <van-swipe-cell>
        <van-cell-group inset @click="showCompanyPopup(item, 'update')">
          <van-cell>
            <template #title>
              <div class="cYE f16">{{ item.companyName }}</div>
            </template>
          </van-cell>
          <van-field v-model="item.taxNo" :border="false" name="税号" class="size" label="税号" placeholder="税号" />
          <van-field v-model="item.bank1" :border="false" name="开户行1" class="size" label="开户行1" placeholder="开户行1" />
          <van-field v-model="item.address1" :border="false" name="银行卡号1" class="size" label="银行卡号1" placeholder="银行卡号1" />
          <van-field v-if="item.bank2" v-model="item.bank2" :border="false" name="开户行2" class="size" label="开户行2" placeholder="开户行2" />
          <van-field v-if="item.address2" v-model="item.address2" :border="false" name="银行卡号2" class="size" label="银行卡号2" placeholder="银行卡号2" />
        </van-cell-group>
        <div class="flb titleBox">
          <div class="cGY f14 l20">员工信息</div>
          <div class="cYE f14 l20" @click.stop="showEmployeePopup({ companyId: item.id }, 'add')">+新增</div>
        </div>
        <div v-for="(el, index) in item.employeeList" :key="index" class="h24 l24 ph16" @click="showEmployeePopup(el, 'update')">
          <van-cell :value="`${el.companySaleName}，${el.companySalePhone}`" class="infoContent">
            <template #right-icon>
              <div class="h100p">
                <van-icon name="cross" class="cross h100p cYE" @click.stop="delEmployeeInfo(el.id)" />
              </div>
            </template>
          </van-cell>
        </div>
        <template #right>
          <van-button square type="danger" text="删除" class="h100p" @click.stop="delCompanyInfo(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
    <van-popup v-model="showCompany" round position="bottom">
      <van-form class="content oyauto w100p" @submit="updateCompanyInfo">
        <div class="flc mt10">
          <van-cell-group inset>
            <van-field v-model="companyInfo.companyName" name="公司名称" label="公司名称" placeholder="公司名称" :rules="[{ required: true, message: '请填写公司名称' }]" />
            <van-field v-model="companyInfo.taxNo" name="税号" label="税号" placeholder="税号" :rules="[{ required: true, message: '请填写税号' }]" />
            <van-field v-model="companyInfo.bank1" name="开户行1" label="开户行1" placeholder="开户行1" :rules="[{ required: true, message: '请填写开户行1' }]" />
            <van-field v-model="companyInfo.address1" name="银行卡号1" label="银行卡号1" placeholder="银行卡号1" :rules="[{ required: true, message: '请填写银行卡号1' }]" />
            <van-field v-model="companyInfo.bank2" name="开户行2" label="开户行2" placeholder="开户行2" />
            <van-field v-model="companyInfo.address2" name="银行卡号2" label="银行卡号2" placeholder="银行卡号2" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ companyStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-popup v-model="showEmployee" round position="bottom">
      <van-form class="content oyauto w100p" @submit="updateEmployeeInfo">
        <div class="flc mt10">
          <van-cell-group inset>
            <van-field v-model="employeeInfo.companySaleName" name="姓名" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
            <van-field v-model="employeeInfo.companySalePhone" name="手机号" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ employeeStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import pinyin from 'js-pinyin';
import { addCompany, getAllCompany, deleteCompany, updateCompany, addCompanySale, deleteCompanySale, updateCompanySale } from '../utils/api';
export default {
  data() {
    return {
      companyList: [],
      showCompany: false,
      companyInfo: {},
      companyStatus: 'add',
      showEmployee: false,
      employeeInfo: {},
      employeeStatus: 'add',
      companyId: ''
    };
  },
  mounted() {
    this.getCompanyList();
  },
  methods: {
    getPingyin(name) {
      return pinyin.getCamelChars(name);
    },
    // 弹框-增/改
    showCompanyPopup(item, type) {
      this.companyInfo = JSON.parse(JSON.stringify(item));
      this.companyStatus = type;
      this.showCompany = true;
    },
    //增/改
    async updateCompanyInfo() {
      this.showCompany = false;
      if (this.companyStatus === 'add') {
        await addCompany({ ...this.companyInfo, bank: `${this.companyInfo.bank1}//${this.companyInfo.address1}`, address: `${this.companyInfo.bank2}//${this.companyInfo.address2}` });
        this.$toast.success('公司信息添加成功！');
      } else {
        await updateCompany({ ...this.companyInfo, bank: `${this.companyInfo.bank1}//${this.companyInfo.address1}`, address: `${this.companyInfo.bank2}//${this.companyInfo.address2}` });
        this.$toast.success('公司信息更新成功！');
      }
      this.getCompanyList();
    },
    //删
    async delCompanyInfo(id) {
      await this.$async.confirm({ message: '确认要删除公司信息吗？' });
      await deleteCompany({ id });
      this.$toast.success('公司信息删除成功！');
      this.getCompanyList();
    },
    //查
    async getCompanyList() {
      let res = await getAllCompany();
      res.data.map(item => {
        let list = item.bank.split('//');
        item.bank1 = list[0];
        item.address1 = list.length > 1 ? list[1] : '';
        let arr = item.address.split('//');
        item.bank2 = arr[0];
        item.address2 = arr.length > 1 ? arr[1] : '';
      });
      this.companyList = res.data;
      let axiosList = [];
      res.data.forEach(el => {
        axiosList.push({ url: '/business/companySale/getAllByCompanyId', data: { companyId: el.id } });
      });
      res = await this.$axiosAll(axiosList);
      res.forEach((el, idx) => {
        this.$set(this.companyList[idx], 'employeeList', el.data);
      });
    },
    //往下是员工
    // 弹框-增/改
    showEmployeePopup(item, type) {
      this.companyId = item.id;
      this.employeeStatus = type;
      this.employeeInfo = JSON.parse(JSON.stringify(item));
      this.showEmployee = true;
    },
    // 增/改
    async updateEmployeeInfo() {
      this.showEmployee = false;
      if (this.employeeStatus === 'add') {
        await addCompanySale({ ...this.employeeInfo });
        this.$toast.success('员工信息添加成功！');
      } else {
        await updateCompanySale({ ...this.employeeInfo });
        this.$toast.success('员工信息更新成功！');
      }
      this.getCompanyList();
    },
    // 删
    async delEmployeeInfo(id) {
      await this.$async.confirm({ message: '确认要删除员工信息吗？' });
      await deleteCompanySale({ id });
      this.$toast.success('员工信息删除成功！');
      this.getCompanyList();
    }
  }
};
</script>
<style lang="less" scoped>
.companyList {
  .size {
    padding: 4px 16px !important;
  }
  .itemBox1 {
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
    background: white;
    padding-bottom: 6px;
  }
  /deep/ .van-field__control {
    color: #aaa !important;
  }
}
</style>
